<template>
  <div class="home" @click="isshow = false">
    <h1 class="title">
      <span class="title-bg"> 您的AI智能助手，</span> 随时随地解决各种问题
    </h1>

    <div class="chat-input">
      <div class="input-wrapper" :style="{ height: tags.length > 0 ? '271px' : '200px' }">
        <div style="position: absolute; z-index: 1000; top: 24px">
          <el-tag v-for="tag in tags" :key="tag.name" closable @close="handleClose(tag)">
            <div style="color: #000; margin-bottom: 5px">{{ tag.name }}</div>
            <div style="color: rgba(0, 0, 0, 0.3)">{{ tag.file_type }}</div>
          </el-tag>
        </div>
        <textarea class="textarea" type="text" v-model="qavalue" :style="{ top: tags.length > 0 ? '91px' : '24px' }"
          placeholder="随时@你想要的AI智能助手，使用各种能力..." @keydown.enter.prevent="handleEnter" />
        <div class="box" :style="{ marginTop: tags.length > 0 ? '191px' : '120px' }">
          <div class="flex">
            <el-select class="model-select" placeholder="选择模型" v-model="modelid">
              <el-option v-for="item in modelList" :key="item" :label="item" :value="item" />
            </el-select>
            <div class="action-buttons">
              <button :class="type == 0 ? 'btn-default' : 'btn-primary'" @click.stop="changetype(0)">
                <img src="../assets/4.png" alt="" v-if="type == 0" />
                <img v-if="type == 1" src="../assets/4-1.png" alt="" />
                数据库
              </button>
              <button :class="type == 1 ? 'btn-default' : 'btn-primary'" @click.stop="changetype(1)">
                <img src="../assets/5-1.png" alt="" v-if="type == 1" />
                <img v-if="type == 0" src="../assets/5.png" alt="" />知识库
              </button>
            </div>
          </div>

          <div class="tools">
            <el-tooltip class="box-item" effect="dark" content="常用语" placement="top">
              <div class="tools-item">
                <img v-if="!isshow" src="../assets/6.png" alt="" @click.stop="changeisshow" />
                <img v-else="isshow" src="../assets/6-1.png" alt="" @click.stop="changeisshow" />
                <div class="history-container" v-if="isshow">
                  <div class="history-header">
                    <h1>常用语</h1>
                  </div>

                  <div class="history-content">
                    <div v-for="item in historyData" :key="item.id" class="history-item"
                      @click.stop="selectuseful(item)">
                      <div class="flex-b">
                        <div>
                          <div class="item-content">
                            <div class="item-text">{{ item.content }}</div>
                          </div>
                        </div>

                        <div style="display: flex; align-items: center">
                          <div>
                            <img src="../assets/11.png" v-if="item.isedit != true" alt=""
                              @click.stop.stop="handleedit(item)" />
                            <img src="../assets/11-1.png" v-else alt="" @click.stop.stop="handleedit(item)" />
                          </div>
                          <div>
                            <img src="../assets/12.png" @click.stop.stop="handleDelete(item)" v-if="item.isdel != true"
                              alt="" />
                            <img src="../assets/12-1.png" v-else alt="" />
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="addbox" @click.stop="addexpressions">＋ 添加常用语</div>
                  </div>
                </div>
              </div>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="附件上传" placement="top">
              <el-upload :limit="3" ref="uploadFile" :action="uploadaction" :headers="headers" :file-list="filelist"
                name="att" multiple :show-file-list="false" :on-success="handlesuccess">
                <div class="tools-item" @click="changeupload">
                  <img src="../assets/7.png" alt="" v-if="isupload == false" />
                  <img src="../assets/7-1.png" alt="" v-else />
                </div>
              </el-upload>
            </el-tooltip>

            <!-- <p>识别结果: {{ transcript }}</p> -->
            <el-tooltip class="box-item" effect="dark" content="语音输入" placement="top">
              <div class="tools-item">
                <img src="../assets/8.png" alt="" @click="startSpeechRecognition" v-if="isListening == false" />

                <!-- 音量波形可视化 -->
                <div id="waveform" @click="stopSpeechRecognition" style="
                    width: 28px;
                    height: 40px;
                    align-items: center;
                    margin-left: 6px;
                    cursor: pointer;
                  " class="bottom-0 left-0 right-0 h-24 flex space-x-1 justify-center overflow-hidden"></div>
                <!-- <img :src="imgurl" @click="stopSpeechRecognition" alt="" v-else style="width:20px;height: 20px;" /> -->
              </div>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="发送" placement="top">
              <div class="tools-item send">
                <img v-if="qavalue == '' || modelid == ''" src="../assets/9.png" alt="" style="cursor: no-drop"
                  @click.stop="sendmsg" />
                <img v-else src="../assets/9-1.png" alt="" @click.stop="sendmsg" />
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <div class="features">
      <div class="feature-card bg1">
        <div class="feature-icon green">
          <img src="../assets/bg1.png" alt="" />
        </div>
        <h3>智能对话</h3>
        <p>先进的大语言模型，提供智能、流畅的对话体验</p>
      </div>

      <div class="feature-card bg2">
        <div class="feature-icon blue">
          <img src="../assets/bg2.png" alt="" />
        </div>
        <h3>数据集成</h3>
        <p>连接您的数据库和知识库，提供更精准的回答</p>
      </div>

      <div class="feature-card bg3">
        <div class="feature-icon purple">
          <img src="../assets/bg3.png" alt="" />
        </div>
        <h3>多模型支持</h3>
        <p>支持多种大语言模型，根据需求灵活选择</p>
      </div>
    </div>

    <!-- 添加常用语 -->
    <el-dialog v-model="dialogVisible">
      <div class="title1">{{ phrasetitle }}</div>
      <textarea class="textarea1" v-model="phrase" placeholder-style="color:#BCBEC0" placeholder="输入常用语内容... "
        @keydown.enter.prevent="handleEnter1"></textarea>
      <template #footer>
        <div class="footer">
          <div class="cancal" @click.stop="dialogVisible = false">取消</div>
          <div class="outok" @click.stop="addphrase">保存</div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  nextTick,
  onBeforeMount,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getModels,
  getPhrasesList,
  Collected,
  addPhrases,
  delPhrases,
  audio2text,
  editPhrases,
} from "../api/home.js";
import axios from "axios";

export default defineComponent({
  name: "Home",
  setup() {
    const router = useRouter();
    const state = reactive({
      modelList: [],
      modelid: "",
      isshow: false,
      type: 0,
      qavalue: "",
      dialogVisible: false,
      historyData: [],
      phrase: "",
      isListening: false,
      uploadFile: null,
      phraseid: "",
      transcript: "",
      recognition: null,
      audioChunks: [],
      audioURL: null,
      audioContext: null,
      analyser: null,
      microphone: null,
      dataArray: null,
      animationId: null,
      waveformBars: Array(30).fill(0),
      uploadaction: "",
      isupload: false,
      phrasetitle: "",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      filelist: [],
      tags: [],
      imgurl: "/src/assets/19.png",
    });

    const handleMenuClick = (e) => {
      state.tabindex = e;
    };

    const changetype = (e) => {
      state.type = e;
    };

    const sendmsg = () => {
      if (state.qavalue == "") {
        ElMessage.error("请输入问题");
        return;
      }
      if (state.modelid == "") {
        ElMessage.error("请选择模型");
        return;
      }
      router.push({
        name: "questionAnswer",
        query: {
          question: state.qavalue,
          modelid: state.modelid,
        },
      });
    };

    const changeisshow = () => {
      state.isshow = !state.isshow;
    };

    const addexpressions = () => {
      state.phrasetitle = "添加常用语";
      state.dialogVisible = true;
    };

    // 获取模型列表
    const getModelsList = async () => {
      const res = await getModels();
      if (res.code == 0) {
        state.modelList = res.data;
        state.modelid = res.data[0];
      } else {
        state.modelList = [];
      }
    };

    // 开始语音录入
    const startSpeechRecognition = async () => {
      state.isListening = true;
      try {
        // 创建音频上下文
        if (!state.audioContext) {
          state.audioContext = new (window.AudioContext || window.webkitAudioContext)();
        }
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        state.recognition = new MediaRecorder(stream);
        state.recognition.ondataavailable = (e) => {
          state.audioChunks.push(e.data);
        };
        state.recognition.onstop = async () => {
          const audioBlob = new Blob(state.audioChunks, { type: "audio/wav" });
          var url = ""
          if (import.meta.env.VITE_APP_BASE_API) {
            url = import.meta.env.VITE_APP_BASE_API + "/api/v0/audio2text"
          } else {
            url = "/api/v0/audio2text"
          }
          const res = await axios.post(url,
            audioBlob, {
            headers: {
              "Content-Type": "application/octet-stream",
              Authorization: `Bearer ` + localStorage.getItem("token"),
            },
          });
          if (res.data.code == 0) {
            state.audioChunks = [];
            state.qavalue = res.data.data;
          }
          state.audioURL = URL.createObjectURL(audioBlob);
          // Clear chunks for next recording
          state.isListening = false; // Stop recording state change
        };
        state.recognition.start();
        state.analyser = state.audioContext.createAnalyser();
        state.analyser.fftSize = 256;
        const bufferLength = state.analyser.frequencyBinCount;
        state.dataArray = new Uint8Array(bufferLength);
        // 连接麦克风到分析器
        state.microphone = state.audioContext.createMediaStreamSource(stream);
        state.microphone.connect(state.analyser);

        // 开始分析声音
        analyzeSound();
      } catch (error) {
        state.isListening = false;
        console.error("Error accessing the microphone:", error);
      }
    };

    // 停止语音录入
    const stopSpeechRecognition = async () => {
      if (state.recognition) {
        state.isListening = false;
        state.recognition.stop();
      }
    };

    // 分析声音
    const analyzeSound = () => {
      if (!state.isListening) return;
      // 获取音频数据
      state.analyser.getByteFrequencyData(state.dataArray);
      // 计算平均音量
      let sum = 0;
      state.dataArray.forEach((value) => {
        sum += value;
      });
      // 标准化音量值 (0-1)
      const average = sum / state.dataArray.length;
      state.volume = Math.min(1, average / 255);
      // 更新波形数据
      state.waveformBars = state.waveformBars.map((_, index) => {
        // 为波形条创建平滑过渡效果
        const targetValue = state.dataArray[index * 8] / 255;
        return Math.max(0.1, Math.min(1, targetValue));
      });

      updateWaveform();
      // 继续分析
      state.animationId = requestAnimationFrame(() => analyzeSound());
    };

    // 初始化波形可视化
    const initWaveform = () => {
      const waveformContainer = document.getElementById("waveform");
      waveformContainer.innerHTML = "";
      for (let i = 0; i < 5; i++) {
        const bar = document.createElement("div");
        bar.className = "bg-primary/30 w-2 rounded-t-lg transition-all duration-100";
        bar.style.height = "20%";
        bar.dataset.index = i;
        waveformContainer.appendChild(bar);
      }
    };

    // 更新波形可视化
    const updateWaveform = () => {
      const bars = document.querySelectorAll("#waveform div");
      bars.forEach((bar, index) => {
        // 使用随机值创建自然波形效果
        const height = Math.max(15, state.waveformBars[index] * 100);
        bar.style.height = `${height}%`;
      });
    };

    // 获取常用语列表
    const getphrasesList = async () => {
      const res = await getPhrasesList(0, 30);
      if (res.code == 0) {
        state.historyData = res.data.items;
      } else {
        state.historyData = [];
      }
    };

    // 添加取消收藏
    const handlefavorite = async (item) => {
      const res = await Collected(item.id);
      if (res.code == 0) {
        item.is_collected = !item.is_collected;
        ElMessage.success("操作成功");
      } else {
        ElMessage.error("操作失败");
      }
    };

    // 添加常用语
    const addphrase = async () => {
      if (state.phrase != "") {
        if (state.phraseid) {
          const res1 = await editPhrases(state.phraseid, {
            phrase: state.phrase,
            id: state.phraseid,
          });
          if (res1.code == 0) {
            ElMessage.success("操作成功");
            state.phrase = "";
            getphrasesList();
            state.dialogVisible = false;
          } else {
            ElMessage.error("操作失败");
          }
        } else {
          const res = await addPhrases({ phrase: state.phrase });
          if (res.code == 0) {
            ElMessage.success("操作成功");
            state.phrase = "";
            getphrasesList();
            state.dialogVisible = false;
          } else {
            ElMessage.error("操作失败");
          }
        }
      }
    };

    // 删除常用语
    const handleDelete = (item) => {
      item.isdel = true;
      ElMessageBox.confirm("确定要删除这条历史记录吗?", "删除", {
        confirmButtonText: "确定", // 确认按钮文本
        cancelButtonText: "取消", // 取消按钮文本
      })
        .then(async () => {
          const res = await delPhrases(item.id);
          if (res.code == 0) {
            state.historyData = state.historyData.filter((i) => i.id !== item.id);
            ElMessage.success("操作成功");
            getphrasesList();
          } else {
            ElMessage.error("操作失败");
          }
        })
        .catch(() => {
          item.isdel = false;
          // catch error
        });
    };

    // 重命名
    const handleedit = async (item) => {
      state.phraseid = item.id;
      state.phrase = item.content;
      state.phrasetitle = "修改常用语";
      state.dialogVisible = true;
    };

    // 上传附件
    const handlesuccess = (res) => {
      if (res.code == 0) {
        var arr = [];
        if (state.tags) {
          arr = state.tags;
        }
        arr.push({ name: res.data.name, id: res.data.id, file_type: res.data.file_type });
        state.tags = arr;
        localStorage.setItem("tags", JSON.stringify(state.tags));
      } else {
        state["uploadFile"].uploadFiles.splice(
          state["uploadFile"].uploadFiles.length - 1,
          1
        );
      }
    };

    const selectuseful = (item) => {
      state.qavalue = item.content;
    };

    // const changeupload = () => {
    //   state.isupload = !state.isupload;
    // };

    const handleEnter = (e) => {
      if (e.isComposing == false) {
        if (e.shiftKey) {
          // 如果按下 Shift + Enter，添加换行符
          state.qavalue += "\n";
        } else {
          // 如果只按下 Enter，触发发送
          if (state.isanswer == true) { } else {
            sendmsg();
          }
        }
      } else {
        if (e.shiftKey) {
          // 如果按下 Shift + Enter，添加换行符
          state.qavalue += "\n";
        }
      }
    };

    onMounted(() => {
      if (import.meta.env.VITE_APP_BASE_API) {
        state.uploadaction = import.meta.env.VITE_APP_BASE_API + "/api/v0/attachment";
      } else {
        state.uploadaction = "/api/v0/attachment";
      }
      console.log(state.uploadaction)
      // state.uploadaction = "https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15";
      getModelsList();
      getphrasesList();
      initWaveform();
    });

    const handleEnter1 = (e) => {
      if (e.isComposing == false) {
        if (e.shiftKey) {
          // 如果按下 Shift + Enter，添加换行符
          state.phrase += "\n";
        } else {
          // 如果只按下 Enter，触发发送
          addphrase();
        }
      } else {
        if (e.shiftKey) {
          // 如果按下 Shift + Enter，添加换行符
          state.phrase += "\n";
        }
      }
    };

    const handleClose = (tag) => {
      state.tags.splice(state.tags.indexOf(tag), 1);
      var arr = JSON.parse(localStorage.getItem("tags"));
      arr.splice(arr.indexOf(tag), 1);
      if (arr.length != 0) {
        localStorage.setItem("tags", JSON.stringify(arr));
      } else {
        localStorage.removeItem("tags");
      }
    };

    return {
      ...toRefs(state),
      handleMenuClick,
      changetype,
      sendmsg,
      changeisshow,
      addexpressions,
      getModelsList,
      handlefavorite,
      getphrasesList,
      addphrase,
      handleDelete,
      handleedit,
      startSpeechRecognition,
      handlesuccess,
      stopSpeechRecognition,
      selectuseful,
      handleEnter,
      handleEnter1,
      handleClose,
      analyzeSound,
      // changeupload,
    };
  },
});
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

:deep().el-dialog {
  width: 750px;
  border-radius: 24px;
}

.addbox {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 40px);
  border-radius: 20px;
  opacity: 1;
  border: 1px solid #bfdafe;
  line-height: 40px;
  color: #4e6bfe;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  left: 20px;
  cursor: pointer;
}

.history-content {
  height: 230px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.addbox span {
  font-size: 24px;
}

.title {
  font-size: 40px;
  color: #333;
  text-align: center;
  margin-bottom: 64px;
  flex-shrink: 0;
  margin-top: 218px;
}

.flex {
  display: flex;
}

.flex-b {
  display: flex;
  justify-content: space-between;
}

.title-bg {
  background: linear-gradient(263deg, #bb58be 15%, #6d9cff 49%, #4cd8d5 87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 对于旧版浏览器 */
}

.textarea {
  position: absolute;
  top: 24px;
  left: 24px;
  border: 0;
  width: calc(100% - 48px);
  height: 100px;
  resize: none;
  font-size: 14px;
}

.textarea:focus {
  outline: none;
}

:deep().el-dialog__footer {
  padding-top: 25px !important;
}

.textarea1 {
  font-size: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  border: 0;
  width: calc(100%);
  height: 300px;
  resize: none;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #f2f2f2;
  padding: 20px;
  margin-top: 24px;
}

.textarea1:focus {
  outline: none;
}

.box {
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.chat-input {
  margin-bottom: 70px;
  flex-shrink: 0;
}

.input-wrapper {
  background: #fff;
  border-radius: 24px;
  max-width: 1200px;
  height: 200px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.model-select {
  min-width: 180px;
  height: 40px !important;
}

:deep() .el-select__wrapper {
  height: 40px !important;
  border-radius: 20px;
  padding-left: 16px;
  padding-right: 16px;
}

/* input {
  flex: 1;
  min-width: 200px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
} */

.action-buttons {
  display: flex;
}

.btn-default {
  width: 102px;
  height: 40px;
  border-radius: 20px;
  opacity: 1;
  background: #dceafe;
  box-sizing: border-box;
  border: 1px solid #bfdafe;
  font-size: 14px;
  color: #4e6bfe;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.btn-default img {
  width: 20px;
  height: auto;
  margin-right: 8px;
}

.btn-primary {
  width: 102px;
  height: 40px;
  border-radius: 20px;
  opacity: 1;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  color: #666666;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.btn-primary img {
  width: 20px;
  height: auto;
  margin-right: 8px;
}

button:focus {
  outline: none;
}

.tools {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tools-item {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #f3f4f6;
  text-align: center;
  align-items: center;
  display: flex;
  position: relative;
}

.send {
  background: #d5d9ec;
}

.send-checked {
  background-color: #6968de;
}

.tools-item img {
  cursor: pointer;
  font-size: 20px;
  color: #666;
  margin: auto;
}

.features {
  flex: 1;
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  align-content: start;
  flex-wrap: wrap;
}

.feature-card {
  width: 380px;
  height: 200px;
  /* background: #fff; */
  padding: 20px 20px 60px 20px;
  border-radius: 12px;
  text-align: left;
  height: fit-content;
  position: relative;
}

.feature-card h3 {
  margin-top: 36px;
  font-size: 24px;
  font-weight: 900;
  color: #3d3d3d;
}

.bg1 {
  /* background: linear-gradient(160deg, #ddf4f6 5%, #d4f1f2 50%, #c3eaeb); */
  background-image: url("../assets/bg-1.png");
}

.bg2 {
  background: linear-gradient(160deg, #b9d9f6 3%, #cfe4fb 48%, #b8d9f6 95%);
  background-image: url("../assets/bg-3.png");
}

.bg3 {
  background: linear-gradient(160deg, #d2d0f7 3%, #dde0fc 48%, #d2cff7 95%);
  background-image: url("../assets/bg-2.png");
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: absolute;
  left: 24px;
  top: -20px;
}

.feature-icon i {
  font-size: 24px;
}

.feature-card p {
  color: #3d3d3d;
  font-size: 16px;
  margin-top: 24px;
  font-weight: 400;
}

.history-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px;
  position: absolute;
  background: #fff;
  top: 50px;
  right: -210px;
  z-index: 100;
  width: 670px;
  box-shadow: 0px 0px 10px 0px rgba(65, 79, 146, 0.11);
  border-radius: 8px;
  height: 351px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.history-header h1 {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: 700;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

:deep().el-input__wrapper {
  padding: 8px 16px;
  border: 0 !important;
  border-radius: 20px;
  width: 180px;
  height: 40px;
  font-size: 14px;
}

:deep().el-input__wrapper:focus {
  outline: none;
}

:deep().el-button {
  outline: none !important;
}

.history-group {
  margin-bottom: 24px;
}

.date-header {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  text-align: left;
}

.history-item {
  /* display: flex;
  justify-content: space-between; */
  align-items: center;
  padding: 10px 13px;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f9fafb;
  border-radius: 4px 4px 4px 4px;
}

.history-item img {
  margin-right: 20px;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep().el-upload-list {
  display: none !important;
}

.item-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.item-text {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: 700;
  font-size: 14px;
  color: #333333;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.item-time {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  line-height: 12px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.item-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s ease;
}

.action-btn:hover {
  color: #1a73e8;
}

/* :deep().el-button :hover{
    background: transparent !important;
} */

.title1 {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: 700;
  font-size: 20px;
  color: #333333;
  line-height: 22px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

:deep().el-dialog__body {
  padding-top: 0;
}

.footer {
  display: flex;
}

.footer div {
  cursor: pointer;
}

.cancal {
  width: 120px;
  line-height: 40px;
  height: 40px;
  border-radius: 20px;
  background: #fff;
  color: #666666;
  border: 1px solid #999999;
  text-align: center;
  font-size: 14px;
  color: #666666;
  margin-left: 227px;
  margin-right: 16px;
}

:deep().el-tag {
  padding: 8px;
  height: auto;
  background: #f5f5f5 !important;
  text-align: left;
  margin-right: 10px;
}

.outok {
  width: 120px;
  line-height: 40px;
  height: 40px;
  border-radius: 20px;
  background: #5450cc;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
}

:deep().el-tooltip__trigger {
  height: 40px !important;
}

@media (max-width: 1008px) {
  .history-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 20px 60px 20px;
    position: absolute;
    background: #fff;
    top: 50px;
    left: -16px;
    z-index: 100;
    width: 500px;
    box-shadow: 0px 0px 10px 0px rgba(65, 79, 146, 0.11);
    border-radius: 8px;
  }

  .input-wrapper {
    height: auto;
  }
}

@media (max-width: 768px) {
  :deep().el-dialog {
    width: 80%;
  }

  .home {
    padding: 15px;
    height: 100%;
  }

  .title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .model-select {
    width: 100%;
  }

  .action-buttons {
    width: 100%;
    justify-content: space-between;
  }

  .tools {
    width: 100%;
    justify-content: space-around;
    margin-left: 0;
  }

  .features {
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
}
</style>
<style src="./home.css"></style>
